<!-- 新增成员设置分配比例 -->
<template>
  <div class="add_user_ratio">
    <Tabs ref="nav" type="card" v-model="currentCard" :animated="false" name="addUserRatio">
      <TabPane
        class="tab_pane"
        :label="item.roleName"
        :name="'card' + index"
        v-for="(item, index) in tableData"
        :key="index">
        <Table
          ref="TableHeight"
          :max-height="500"
          disabled-hover
          :columns="columns"
          :data="item.ratioVOList"
          border
          :row-class-name="rowClassName">
          <template slot-scope="{ row }" slot="userName">
            <span class="sp1" v-for="(itemL, indx) in row.bonusRatioList" :key="indx">
              {{ itemL.userName ? itemL.userName : '-' }}
            </span>
          </template>
          <template slot-scope="{ row }" slot="workNo">
            <span class="sp1" v-for="(itemL, indx) in row.bonusRatioList" :key="indx">
              {{ itemL.workNo ? itemL.workNo : '-' }}
            </span>
          </template>
          <template slot-scope="{ row }" slot="roleName">
            <span class="sp1" v-for="(itemL, indx) in row.bonusRatioList" :key="indx">
              {{ itemL.roleName ? itemL.roleName : '-' }}
            </span>
          </template>
          <template slot-scope="{ row }" slot="bonusRatio">
            <span class="sp1" v-for="(itemL, indx) in row.bonusRatioList" :key="indx">
              <InputNumber
                type="number"
                :min="0"
                :max="100"
                v-model="itemL.bonusRatio"
                @on-blur="changeInput(item, index, itemL, indx, row)"
                :formatter="(value) => `${value}`"
                :parser="(value) => value.replace('%', '')"
                :class="itemL.redFlag ? 'red_color' : ''"></InputNumber>
            </span>
          </template>
        </Table>
      </TabPane>
    </Tabs>
    <div class="flex flex-horizontal-end btn-operate" style="margintop: 10px">
      <!-- <Button @click="handleClose">取消</Button> -->
      <Button type="primary" @click="submitFun()" style="margin-left: 8px" :loading="btnLoading">确定</Button>
    </div>
  </div>
</template>

<script>
  import teamsApi from '@/biz/buildingManagement/teams'
  import columns from '../../opt/addUserRatio'
  export default {
    props: {
      addUserRatioData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        currentCard: 'card0',
        tableData: this.$tool.deepClone(this.addUserRatioData),
        columns: [],
        falgeAllNumber: false,
        allNumber: 0,
        isSopStatus: true,
        btnLoading: false
      }
    },
    methods: {
      rowClassName(row, index) {
        if (row.blueFlag) {
          return 'table-info-row'
        }
        return ''
      },
      changeInput(obj, index, data, RowIndex, rows) {
        console.log(obj, index, data, RowIndex, rows)
        //obj tableData下第一层数据，index第一层数据下标  data修改的数据RowIndex修改的数据在第二层下标 rows第二层数据
        if (data.bonusRatio == null) {
          data.bonusRatio = 0
        }
        this.$set(rows.bonusRatioList, RowIndex, data)
        this.$set(obj.ratioVOList, rows._index, rows)
        this.$set(this.tableData, index, obj)
        this.allNumber = 0
        rows.bonusRatioList.map((item) => {
          this.allNumber += parseInt(item.bonusRatio)
          this.falgeAllNumber = this.allNumber > 100 ? true : false
        })
        if (this.falgeAllNumber && this.isSopStatus) {
          this.$Message.error('相同角色且同一生效日期的“奖金分摊比例”总和不可大于100%')
        }
      },
      handleClose() {
        this.$emit('onCloseAddUserRatio')
      },
      getNewGoodsList(data) {
        let bonusRatiotop = false
        data.forEach((itemC) => {
          itemC.ratioVOList.forEach((item) => {
            item.ratioTotal = 0
            item.bonusRatioList.forEach((itemL) => {
              item.ratioTotal += itemL.bonusRatio
            })
            if (item.ratioTotal > 100) {
              bonusRatiotop = true
            }
          })
        })
        return bonusRatiotop
      },
      submitFun() {
        let infoData = [],
          oldInfoData = [],
          formData = []
        if (this.getNewGoodsList(this.tableData) && this.isSopStatus) {
          return this.$Message.error('相同角色且同一生效日期的“奖金分摊比例”总和不可大于100%')
        } else {
          this.tableData.forEach((itemC) => {
            itemC.ratioVOList.forEach((item) => {
              infoData = infoData.concat(item.bonusRatioList)
            })
          })
          this.addUserRatioData.forEach((itemC) => {
            itemC.ratioVOList.forEach((item) => {
              oldInfoData = oldInfoData.concat(item.bonusRatioList)
            })
          })
          formData = infoData.filter((item, index) =>
            oldInfoData.some(
              (ele, idx) =>
                index == idx &&
                ele.roleId == item.roleId &&
                ele.effectiveDate == item.effectiveDate &&
                ele.userId == item.userId &&
                ele.bonusRatio != item.bonusRatio
            )
          )
        }
        this.btnLoading = true
        let params = {
          form: formData,
          operationType: 2
        }
        teamsApi.adjustBonusRatio(params).then((res) => {
          this.handleClose()
          this.$emit('onChangeTable')
          this.btnLoading = false
        })
      },
      getSopConfig() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          sopType: 30
        }
        teamsApi.getSopConfig(params).then((res) => {
          console.log(res)
          this.isSopStatus = res[0].isAssess
        })
      }
    },
    mounted() {
      this.columns = columns.Columns
      columns.sendThis(this)
      this.getSopConfig()
    }
  }
</script>
<style lang="scss" scoped>
  .add_user_ratio {
    .btn-operate {
      margin: 10px 0;
    }

    .ivu-table-cell-slot {
      & > .sp1:last-child {
        border: none;
      }
    }

    .sp1 {
      display: block;
      min-height: 48px;
      line-height: 48px;
      text-align: center;
      border-bottom: 1px #e8eaec solid;
    }

    .red_color {
      ::v-deep.ivu-input-number-input {
        color: red !important;
      }
    }

    ::v-deep.ivu-table .table-info-row td {
      background-color: #c4e6fd;
    }
  }
</style>
